<template>
	<view class="body">
		<myHeader :title="title"></myHeader>
		<view class="mt-20 p-20">
			<uni-forms-item label="方案说明">
				<uni-easyinput required="true" type="textarea" v-model="taskContent" placeholder="请输入方案说明" />
			</uni-forms-item>
		</view>
		<view class="mt-20 p-20">
			
			<uni-forms-item label="会议文件" name="filesupload">
				<uni-file-picker 
				    v-model="filesupload" 
					ref="files"
					:limit="filesupload.length+1"
				    fileMediatype="all" 
					:auto-upload="false"
				    mode="grid" 
				    @select="select" 
				    @delete="progress" 
				    @success="success" 
				/>
			</uni-forms-item>
			
			<button class="mtb-20 bg-red text-white" :disabled="disable" @click="submitForm">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		planMeeting
	} from '../../api/api_voluntee.js'
	import myHeader from '../components/head.vue'
	export default {
		data() {
			return {
				imgNumber:5,//文件数量
				taskContent: '',
				title: '上传方案',
				imageValue: [],
				meetingTaskId: '',
				imgDate:[],
				filesupload:[],
				disable:false,
				extension: ['doc', 'pdf', 'docx', 'doc', 'png', 'jpg', 'jpeg'],
			}
		},
		onLoad(ars) {
			this.meetingTaskId = Number.parseInt(ars.meetingId)
			console.log(this.meetingTaskId)
		},
		methods: {
			success(e){
				console.log(this.filesupload)
			},
			select(e){
				let _this = this
				let temp = e.tempFiles.filter(res=> {
					return this.extension.indexOf(res.extname)<0
				})
				if(temp.length>0){//判断是否可上传
					return uni.showToast({
						title:"请不要上传出图片、pdf、word之外的文件",
						duration:2000,
						icon:'none',
						success: () => {
							_this.img = [],
							_this.filesupload = []
						}
					})
				}
				let token = uni.getStorageSync('AuthToken')
				e.tempFiles.forEach((source,index)=>{
					uni.uploadFile({
						url: '/api/uploadFile', //仅为示例，非真实的接口地址
						filePath: e.tempFilePaths[index],
						name: 'file',
						header: {
							'x-access-token': token
						},
						formData: {
							'name': source.name,
							'size': source.size
						},
						success: (res) => {
							let a = JSON.parse(res.data).data;
							_this.filesupload.push({
								baseFileId:a.id,
								baseFileUrl:a.url,
								fileName:a.fileName,
								"name":a.fileName,
								"extname":a.fileName,
								url:a.url,
							})
							console.log(_this.filesupload)
						},
						fail: () => {
								uni.showToast({
									title:'文件上传失败',
									duration:2000,
									icon:'none'
								})
						}
					});
				})
			} ,
			progress(e){//删除
			console.log(e)
			let name =  e.tempFile.name
				let files = this.filesupload.filter(e=>e.fileName==name); 
				let index = this.filesupload.indexOf(files[0])
				this.filesupload.splice(index, 1); 
			console.log(this.filesupload)
			} ,
			submitForm() {
				if(this.taskContent.length===0||this.filesupload.length===0){
					uni.showToast({
						title:'请输入任务说明和上传图片',
						duration:2000,
						icon:'none'
					})
				}else{
					let _this = this
					uni.showModal({
						title: '提示',
						content: '是否确定提交本次任务？',
						success: function(res) {
							planMeeting({
								files:_this.filesupload,
								"meetingId": _this.meetingTaskId,
								meetDesc:_this.taskContent 
							}).then(res=>{
								uni.navigateBack({
									success(res){
										setTimeout(
										uni.showToast({
											title:"提交成功",
											duration:2000,
										}),500)
									}
								})
							})
							
						},
					})
				}
				
			},
			// 获取上传状态
			chooseImg(){
				let _this = this
				uni.chooseImage({
					count:5-_this.filesupload.length,
					success:(res)=>{
						let parma = [];
						console.log(res)
						res.tempFilePaths.forEach((e, index) => {
							parma.push({
								name: "files",
								file: res.tempFiles[index],
								url: e,
							})
						})
						let token = uni.getStorageSync("AuthToken");
						uni.uploadFile({
							url: '/api/uploadMultipleFiles', //仅为示例，非真实的接口地址
							name: 'files',
							files: parma,
							header: {
								'x-access-token': token
							},
							success: (uploadFileRes) => {
								console.log(JSON.parse(uploadFileRes.data).data)
								_this.filesupload.push(...(JSON.parse(uploadFileRes.data)
									.data)) //添加
							},
							fail: res => {
								console.log(res)
							}
						});
					},
					fail: (res) => {
						console.log(res)
					},
				})
			}
		},
		components: {
			myHeader
		},
	}
</script>

<style scoped lang="scss">
	@import url("/static/party_building/assets/style/federation.css");

	/**
	 * 定义按钮样式
	 */
	@mixin button-commit {
		background: linear-gradient(180deg, #ff5e59, #e20909);
		color: #fff;
	}

	/deep/ uni-button {
		@include button-commit;
	}
	
	.body{
		.headerbutton{
			width: 100%;
			height: 100%;
		}
		/deep/ .uni-grid{
			.uni-grid-item{
				width: 120upx !important;
				height: 120upx !important;
				margin: 1%;
				span{
					width: 20px;
					height: 20px;
					background-color: #e20909;
					color: #FFF;
					text-align: center;
					border-radius: 50%;
					position: absolute;
					position: absolute;
					right: 1px;
				}
				uni-image{
				width: 120upx;
				height: 120upx;
				}
			}
		}
	}
</style>
